/*
* @Author: yyf
* @Date: 2018/5/18
* @description:  操作历史
*/
<template>
    <div class="p-20">
        <h3 class="custom-history-title">信息标题：{{title}}</h3>
        <div class="custom-box p-20 m-t-20">
            <el-row class="custom-title">
                <h3 class="m-b-20">操作记录</h3>
                <el-table :data="operateHistoryData">
                    <el-table-column label="创建人" prop="acquireName"></el-table-column>
                    <el-table-column label="操作人" prop="operateName"></el-table-column>
                    <el-table-column label="信息分类" prop="businessType">
                        <template slot-scope="scope">
                            {{scope.row.businessType | getDicNameById('businessType')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="数据状态" prop="operateStatus">
                        <template slot-scope="scope">
                            {{scope.row.operateStatus | getDicNameById('operate_status')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="信息状态" prop="infoStatus">
                        <template slot-scope="scope">
                            {{scope.row.infoStatus | getDicNameById('infoStatus')}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作时间" prop="operateTime">
                        <template slot-scope="scope">
                            {{scope.row.operateTime | cmsMoment}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <span v-if="scope.row.operateStatus === 1">-</span>
                            <el-button type="text" @click="getOperateDetail(scope.row.messageOperateDetailList)" v-else>详情</el-button>
                            <el-dialog :visible.sync="operateDetailDialog" title="基本信息">
                                <!-- <el-row class="align-center">信息名称：{{title}}</el-row> -->
                                <el-table :data="messageOperateDetailList">
                                    <el-table-column label="ID" prop="id"></el-table-column>
                                    <el-table-column label="字段名称" prop="fieldRemark"></el-table-column>
                                    <el-table-column label="更新前" prop="beforeValue"></el-table-column>
                                    <el-table-column label="更新后" prop="afterValue"></el-table-column>
                                </el-table>
                                <el-row class="align-center m-t-20">
                                    <el-button type="primary" @click="operateDetailDialog=false">关闭</el-button>
                                </el-row>
                            </el-dialog>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
        <div class="custom-box p-20 m-t-20">
            <el-row class="custom-title">
                <h3 class="m-b-20">发布记录</h3>
                    <el-table :data="publishData">
                        <el-table-column label="日期" prop="createTime">
                            <template slot-scope="scope">
                                {{scope.row.createTime | cmsMoment}}
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" prop="operateStatus">
                            <template slot-scope="scope">
                                {{scope.row.operateStatus === 1 ? '已发布' : (scope.row.operateStatus === 2 ? '取消发布' : '')}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作人" prop="createName"></el-table-column>
                        <el-table-column label="发布说明">
                            <template slot-scope="scope">
                                <el-button type="text" @click="publishMessageDialog=true">{{scope.row.remark}}</el-button>
                                <el-dialog :visible.sync="publishMessageDialog" title="发布说明">
                                    <el-input type="textarea" :row="4" :value="scope.row.remark"></el-input>
                                    <el-row class="align-center m-t-20">
                                        <el-button type="primary" @click="publishMessageDialog=false">关闭</el-button>
                                    </el-row>
                                </el-dialog>
                            </template>
                        </el-table-column>
                    </el-table>
            </el-row>
        </div>
        <el-row class="align-center m-t-20">
            <el-button type="primary" @click="toEditPage">编辑</el-button>
            <el-button type="primary" @click="close">关闭</el-button>
        </el-row>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { MessageOperateVo, MessagePublishVo, MessageOperateDetail } from '../../api/Interface';
import { OperateHistoryDto } from '../../service/common/interface';
import CommonApi from '../../service/common/index';
@Component({
})
export default class OperateHistory extends Vue {
    public operateHistoryData: Array<MessageOperateVo> = []; // 操作记录列表
    public operateHistoryDto: OperateHistoryDto = {} as OperateHistoryDto; // 操作记录参数
    public publishData: Array<MessagePublishVo> = []; // 发布记录列表
    public businessId: string = ''; // 业务ID
    public businessType: string = ''; // 操作历史业务分类(1-工商、2-事件、3人物)
    public businessName: string = ''; // 跳转前的路由
    public title: string = ''; // 信息标题
    public publishMessageDialog: boolean = false; // 发布记录弹框
    public operateDetailDialog: boolean = false; // 发布记录弹框
    public messageOperateDetailList: Array<MessageOperateDetail> = []; // 操作详情

    public mounted() {
        this.businessId = this.$route.params.businessId;
        this.businessType = this.$route.params.businessType;
        this.businessName = this.$route.params.businessName;
        this.title = decodeURIComponent(this.$route.params.title);
        this.getMessageOperate();
        this.getMessagePublish();
    }
    // 获取操作记录
    public async getMessageOperate() {
        this.operateHistoryDto['pageParam.pageIndex'] = 1;
        this.operateHistoryDto['pageParam.pageSize'] = 10;
        this.operateHistoryDto.businessId = this.businessId;
        this.operateHistoryDto.businessType = this.businessType;
        const res = await CommonApi.getMessageOperate(this.operateHistoryDto);
        if (res.resCode === '0') {
            this.operateHistoryData = res.data.resultData;
        }
    }
    // 获取发布记录
    public async getMessagePublish() {
        this.operateHistoryDto['pageParam.pageIndex'] = 1;
        this.operateHistoryDto['pageParam.pageSize'] = 10;
        this.operateHistoryDto.businessId = this.businessId;
        this.operateHistoryDto.businessType = this.businessType;
        const res = await CommonApi.getMessagePublish(this.operateHistoryDto);
        if (res.resCode === '0') {
            this.publishData = res.data.resultData;
        }
    }
    // 操作记录详情
    public getOperateDetail(data: Array<MessageOperateDetail>) {
        this.operateDetailDialog = true;
        this.messageOperateDetailList = data;
    }
    // 跳转到编辑页
    public toEditPage() {
        switch (this.businessType) {
            case '1':
                this.$router.push({ name: this.businessName + '-detail', params: {itemId: this.businessId}});
                break;
            case '2':
                this.$router.push({ name: this.businessName + '-detail', params: {eventId: this.businessId, tabIndex: '0'}});
                break;
            case '3':
                this.$router.push({ name: this.businessName + '-detail', params: {id: this.businessId, tabIndex: '0'}});
                break;
        
            default:
                break;
        }
    }
    // 关闭
    public close() {
        this.$router.push({ name: this.businessName + '-list'});
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .custom-history-title {
        text-align: center;
        font-size: 18px;
    }
</style>
